<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui</title> 
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="layui/css/layui.css" media="all">
		<script src="layui/layui.js"></script>
		<script src="js/jquery-1.10.2.min.js"></script>
	</head>
	<body>
		<!-- 文件夹树 -->
		<div hidden="hidden" style="padding: 20px 20px;" id="folderTree" class="demo-tree"></div>
		<div style="margin-left: 20px;">

			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				<legend>上传图片到相册</legend>
			</fieldset>

			<div class="layui-upload">
				<button type="button" class="layui-btn layui-btn-normal" id="testList">选择图片 | 视频</button>
				<button type="button" style="margin-left: 20px;" class="layui-btn" id="testListAction">开始上传</button>
				<!-- 选择文件夹 -->
				<button type="button" style="margin-left: 20px;" class="layui-btn layui-btn-danger" id="clearList">清空列表</button>
				<!-- 选择文件夹 -->
				<div id="selFolder" disabled="true" class="layui-form-item" style="width: 300px;display: inline-block;">
					<label style="cursor: pointer;" class="layui-form-label">选择文件夹:</label>
					<div class="layui-input-block">
						<input type="text" id="fname" value="根目录" autocomplete="off" class="layui-input">
						
					</div>
				</div>
				<!-- 自动归类按钮 -->
				<form class="layui-form" style="display: inline;margin-left: 20px;">
					<input type="checkbox" id="autoClassify" value="0" name="ac[auto]" title="自动归类" checked="checked">
				</form>
				<div class="layui-upload-list" style="max-width: 1000px;">
					<table class="layui-table">
						<colgroup>
							<col>
							<col width="150">
							<col width="260">
							<col width="150">
						</colgroup>
						<thead>
							<tr>
								<th>文件名</th>
								<th>大小</th>
								<th>上传进度</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="demoList" ></tbody>
					</table>
				</div>

			</div>
		</div>

		<script src="layui/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
		<script>
			//全局文件夹id
			window.checked = 1;
			window.data_id = {fid:"0"}
			
			layui.use(['upload', 'element', 'layer'], function() {
				var $ = layui.jquery,
					upload = layui.upload,
					element = layui.element,
					layer = layui.layer;



				//演示多文件列表
				var uploadListIns = upload.render({
					elem: '#testList',
					elemList: $('#demoList'), //列表元素对象
					url: 'upload',
					accept: 'file',
					exts: 'jpg|png|bmp|jpeg|rm|rmvb|wmv|avi|mp4|3gp|mkv',
					multiple: true,
					number: 99,
					size: 0,
					data:{fid:function(){return window.data_id.fid;},autoClassify:function(){return window.checked? 1:0;}},
					auto: false,
					bindAction: '#testListAction',
					choose: function(obj) {
						var that = this;
						var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
						//读取本地文件
						obj.preview(function(index, file, result) {
							var tr = $(['<tr id="upload-' + index + '">', '<td>' + file.name + '</td>', '<td>' + (file.size / 1014).toFixed(
									1) + 'kb</td>', '<td><div class="layui-progress" lay-filter="progress-demo-' + index +
								'"><div class="layui-progress-bar" lay-percent=""></div></div></td>', '<td>',
								'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
								'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>', '</td>', '</tr>'
							].join(''));

							//单个重传
							tr.find('.demo-reload').on('click', function() {
								obj.upload(index, file);
							});

							//删除
							tr.find('.demo-delete').on('click', function() {
								delete files[index]; //删除对应的文件
								tr.remove();
								uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
							});

							that.elemList.append(tr);
							element.render('progress'); //渲染新加的进度条组件
						});
					},
					done: function(res, index, upload) { //成功的回调
						var that = this;
						//if(res.code == 0){ //上传成功
						var tr = that.elemList.find('tr#upload-' + index),
							tds = tr.children();
						tds.eq(3).html(''); //清空操作
						delete this.files[index]; //删除文件队列已经上传成功的文件
						
						return;
						//}
						this.error(index, upload);
					},
					allDone: function(obj) { //多文件上传完毕后的状态回调
						$("#testListAction").attr("disabled", false);
						//上传成功提示
						layer.msg("上传完成",{time:1000})
						console.log(obj)
					},
					error: function(index, upload) { //错误回调
						var that = this;
						var tr = that.elemList.find('tr#upload-' + index),
							tds = tr.children();
						tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
					},
					progress: function(n, elem, e, index) {
						element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比
					}
				});

				$("#clearList").click(function() {
					$('#demoList').empty()
					$("#testListAction").attr("disabled", false);
					uploadListIns.files = []
				})
				$("#testListAction").click(function() {
					$("#testListAction").attr("disabled", true);
				})
				$("#testList").click(function() {
					$("#testListAction").attr("disabled", false);
				})
				$("#selFolder").click(function() {
					$.post("/selFolder", {}, function(resp) {
						if (resp.code == 200) {
							//文件夹树
							layui.use(['tree', 'util'], function() {
								var tree = layui.tree,
									layer = layui.layer,
									util = layui.util,
									$ = layui.jquery;

								var index = layer.open({
									type: 1,
									title: "请选择文件夹",
									skin: 'layui-layer-rim', //加上边框
									area: ['420px', '240px'], //宽高
									content: $("#folderTree")
								});


								//仅节点左侧图标控制收缩
								tree.render({
									elem: '#folderTree',
									data: resp.data,
									onlyIconControl: true //是否仅允许节点左侧图标控制展开收缩
										,
									click: function(obj) {
										// layer.msg(JSON.stringify(obj.data));
										$("#fname").val(obj.data.title);
										window.data_id.fid = obj.data.id;
										// layer.msg(window.id)
										layer.close(index)
									}
								});


							})
						} else {
							layer.msg("获取数据失败，请稍后再试！")
						}
					})

				})
				
				layui.use("form",function(){
					layui.form.on('checkbox()',function(data){
						window.checked = this.checked
					})
				})
				
			});
		</script>
	</body>
</html>
